<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <title>服务器维护</title>
    <script src="../trd/jquery/jquery-2.0.2.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../trd/element/element.css">
    <link rel="stylesheet" href="../../css/base.css">
    <script type="text/javascript" src="../trd/vue/vue.js"></script>
    <script type="text/javascript" src="../trd/element/element.js"></script>
    <style>
        html,body{
            height: 100%;
            width: 100%;
        }
        .cell {
            padding-right: 0px !important;
        }

    </style>
</head>

<body style="background-color: rgb(255, 255, 255); box-sizing: border-box; color: rgb(51, 51, 51); display: block; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">
    <div  id="app" style="margin:0px 15px;height: 100%" v-cloak>
        <el-row style="height: 45px;line-height: 45px;">
            <el-col :span="24">
                <el-button type="success" size="small" @click="add">新增</el-button>
                <el-button type="danger" size="small" @click="delBatch">删除</el-button>
            </el-col>
        </el-row>
        <!--<el-divider content-position="left"></el-divider>-->
        <el-row style="height: calc( 100% - 50px)">
                <el-table :header-row-class-name="'table-header'" :row-class-name="'table-row'" border
                        :data="serverInfoList" ref="selectedRow"
                        style="width: 100%">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="hostName"
                            label="主机名"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="userName"
                            label="登陆用户"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="mark"
                            label="备注"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            prop="host"
                            label="主机地址"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="port"
                            label="端口"
                            width="90">
                    </el-table-column>
                    <el-table-column
                            prop="createTime"
                            label="最后修改时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button @click="fix(scope.$index, scope.row)">修改</el-button>
                            <el-button @click="del(scope.$index, scope.row)">删除</el-button>
                            <el-button @click="query(scope.$index, scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                </template>
        </el-row>
        <el-dialog
                :title="dialogName"
                :visible.sync="dialogVisible"
                width="80%"
                >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="主机名称" prop="userName">
                            <el-input v-model="ruleForm.hostName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="登陆用户" prop="userName">
                            <el-input v-model="ruleForm.userName"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="主机地址" prop="host">
                            <el-input v-model="ruleForm.host"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="端口" prop="port">
                            <el-input v-model="ruleForm.port"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="密码" prop="passWord">
                            <el-input v-model="ruleForm.passWord"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="备注" prop="mark">
                            <el-input v-model="ruleForm.mark"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <span slot="footer" class="dialog-footer">
                 <el-button @click="resetForm('ruleForm')">重 置</el-button>
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button v-if="openDialogType!=3" type="primary" @click="submitForm('ruleForm')">保 存</el-button>
            </span>
        </el-dialog>
    </div>

</body>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            openDialogType:1,
            serverInfoList: [],
            dialogName:"",
            dialogVisible:false,
            selectedRow:[],
            ruleForm:{
                id:'',
                hostName:'',
                userName:'',
                passWord:'',
                port:'',
                host:'',
                mark:'',
                createTime:''
            },
            rules: {
                hostName: [
                    { required: true, message: '请输入主机名', trigger: 'blur' },
                    { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }
                ],
                userName: [
                    { required: true, message: '请输入登录名', trigger: 'blur' },
                    { min: 1, max: 60, message: '长度在 1 到 60 个字符', trigger: 'blur' }
                ],
                host: [
                    { required: true, message: '请输入主机ip', trigger: 'blur' },
                    { min: 1, max: 60, message: '长度在 5 到 16 个字符', trigger: 'blur' }
                ],
                port: [
                    { required: true, message: '请输入端口号', trigger: 'blur' },
                ],
                passWord: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 0, max: 128, message: '长度在 0 到 128 个字符', trigger: 'blur' }
                ],
                mark: [
                    { required: false, message: '请输入备注', trigger: 'blur' },
                    { min: 0, max: 128, message: '长度在 0 到 500 个字符', trigger: 'blur' }
                ]
            }

        },
        mounted:function(){
            var that = this
            this.$nextTick(function (){that.initHostList()});
        },
        created:function(){

        },
        methods: {
            initHostList:function(){
                var that = this;
                $.getJSON("/hostController/getHostInfoList", function(json){
                    if(json.status==200){
                        that.serverInfoList=json.data;
                    }else {
                        that.$message(json.msg);
                    }
                });
            },
            add:function(){

                this.openDialogType=1
                this.ruleForm={
                    id:'',
                    createTime:'',
                    userName:'',
                    passWord:'',
                    port:'',
                    host:'',
                    mark:'',
                    createTime:''
                },
                this.resetForm('ruleForm')
                this.showDialog("新增")
            },
            fix:function(index,row){
                this.openDialogType=2
                this.resetForm('ruleForm')
                this.showDialog("修改",row)
            },
            del:function(index,row){
                var that = this;
                $.ajax({
                    url : "/hostController/delHost",
                    async : false,
                    type : "get",
                    contentType : 'application/json',
                    dataType : 'json',
                    data :{ids:row.id},
                    success : function(data) {
                        that.$message(data.msg);
                        that.initHostList()
                    }
                });
            },
            delBatch:function(){
                var that = this
                if(this.$refs.selectedRow.selection.length==0){
                    that.$message("请选择要删除的数据！");
                    return
                }
                var rows = this.$refs.selectedRow.selection;
                var ids = []
                rows.forEach(function (item, idnex, array) {
                    ids.push(item.id)
                })

                $.ajax({
                    url : "/hostController/delHost",
                    async : false,
                    type : "get",
                    contentType : 'application/json',
                    dataType : 'json',
                    data :{ids:ids.join(",")},
                    success : function(data) {
                        that.$message(data.msg);
                        that.initHostList()
                    }
                });
            },
            query:function(index,row){

                this.openDialogType=3
                this.resetForm('ruleForm')
                this.showDialog("查看",row)
            },
            showDialog:function (dialogName,row){
                this.dialogVisible=true
                this.dialogName = dialogName;
                if(row){
                    this.ruleForm=row;
                }
            },
            submitForm(formName) {
                var that = this;
                var url_ = "";
                if(this.openDialogType==1){
                    url_ = "/hostController/addHost"
                }
                if(this.openDialogType==2){
                    url_ = "/hostController/fixHost"
                }
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        $.ajax({
                            url : url_,
                            async : false,
                            type : "POST",
                            contentType : 'application/json',
                            dataType : 'json',
                            data :JSON.stringify(that.ruleForm),
                            success : function(data) {
                                that.$message(data.msg);
                                that.initHostList()
                                if(data.status==200){
                                    that.dialogVisible=false
                                }
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            resetForm(formName) {
                var that = this;
                this.$nextTick(()=>{
                    that.$refs[formName].resetFields();
                })

            }
        }
    })
</script>

</html>
